<template>
  <el-drawer v-model="drawer" :with-header="false" :size="pageSize" ref="drawerRef" :append-to-body="true" width="730px" @close="close" class="SupplierDetail">
    <div class="active-detail-content">
      <div class="header-content">
        <h3 class="active-title">{{ form.shortName }}
          <span style="margin-left: 40px">
            <el-button v-if="isEdit" type="primary" :icon="Edit" text size="small" @click="toEdit">编辑</el-button>
            <el-button v-if="!isEdit" type="info" :icon="CloseBold" text size="small" @click="isEdit = true">取消</el-button>
            <el-button v-if="!isEdit" type="primary" :icon="Check" text size="small" @click="editDetail">保存</el-button>
          </span>
        </h3>
        <el-row justify="center" style="margin-top:5px">
          <div class="tips-cell">
            <span class="tips">负责人</span>
            <el-select v-if="isEdit" v-model="form.purchaseUserId" placeholder="-" style="width:120px;" size="small" disabled>
              <el-option v-for="item in enterpriseUsers" :key="item.userId" :label="item.nickname" :value="item.userId"/>
            </el-select>
            <el-select v-else v-model="editForm.purchaseUserId" placeholder="请选择负责人" style="width:120px;" size="small" @change="mainContactChange">
              <el-option v-for="item in enterpriseUsers" :key="item.userId" :label="item.nickname" :value="item.userId"/>
            </el-select>
          </div>
          <div class="tips-cell">
            <span class="tips">产品线</span>
            <el-select v-if="isEdit" v-model="form.productName" placeholder="-" style="width:120px;" size="small" disabled>
              <el-option v-for="item in productList" :key="item.id" :label="item.name" :value="item.name"/>
            </el-select>
            <el-select v-else v-model="editForm.productName" placeholder="请选择产品线" style="width:120px;" size="small">
              <el-option v-for="item in productList" :key="item.id" :label="item.name" :value="item.name"/>
            </el-select>
          </div>
          <div class="tips-cell">
            <span class="tips">状态</span>
            <el-select v-if="isEdit" v-model="form.state" placeholder="-" style="width:120px;" size="small" disabled>
              <el-option label="沟通中" :value="0"/>
              <el-option label="合作中" :value="1"/>
              <el-option label="已终止" :value="-1"/>
            </el-select>
            <el-select v-else v-model="editForm.state" placeholder="请选择来源" style="width:120px;" size="small">
              <el-option label="沟通中" :value="0"/>
              <el-option label="合作中" :value="1"/>
              <el-option label="已终止" :value="-1"/>
            </el-select>
          </div>
          <div class="tips-cell">
            <el-button size="small" @click="shareVisible = true">共享</el-button>
            <el-button type="danger" style="margin-left: 20px" size="small" @click="relieveBound">解除捆绑</el-button>
          </div>
        </el-row>
      </div>

      <el-row class="panel-row">
        <el-col :span="8">
          <el-card :body-style="{ padding: `8px 10px` }" shadow="hover">
            <el-row justify="space-between" style="padding: 0 11px;margin-top: 10px;">
              <h4>
                <el-icon>
                  <Pointer/>
                </el-icon>
                应付
              </h4>
              <el-button type="primary" link size="small">
                <el-icon>
                  <RefreshLeft/>
                </el-icon>
              </el-button>
            </el-row>
            <el-row align="middle" class="row-cell text-center">
              <div style="margin: 0 auto">
                <el-row align="middle">
                  <!--              FIXME (不知道在哪) 这个数是拿采购金额-已付金额的值-->
                  <el-input size="small" v-model="form.debt" :disabled="isEdit"></el-input>
                </el-row>
                <div class="label-tips">计划付款</div>
              </div>
            </el-row>
          </el-card>

          <el-card :body-style="{ padding: `8px 10px` }" shadow="hover">
            <el-row justify="space-between" style="padding: 0 11px">
              <h4>
                <el-icon>
                  <DataLine/>
                </el-icon>
                采购数据
              </h4>
              <el-button type="primary" link size="small">
                <el-icon>
                  <RefreshLeft/>
                </el-icon>
              </el-button>
            </el-row>
            <el-row style="margin-top: 10px;" class="text-center">
              <div class="procure-data">
                <el-row align="middle" style="text-align: center">
                  <!--                采购金额（合同金额累计）-->
                  <el-input size="small" v-model="form.amount" :disabled="isEdit"></el-input>
                </el-row>
                <div class="label-tips">采购</div>
              </div>
              <div class="procure-data">
                <el-row align="middle">
                  <!--                已付金额（付款相关金额累计）-->
                  <el-input size="small" v-model="form.payAmount" :disabled="isEdit"></el-input>
                </el-row>
                <div class="label-tips">已付</div>
              </div>
              <div class="procure-data">
                <el-row align="middle">
                  <!--                实际票面上的金额-->
                  <el-input size="small" v-model="form.bill" :disabled="isEdit"></el-input>
                </el-row>
                <div class="label-tips">票据</div>
              </div>
              <div class="procure-data" style="font-size: 18px">
                <el-row align="middle">
                  <el-icon style="margin: 0 auto">
                    <Finished/>
                  </el-icon>
                </el-row>
                <div class="label-tips">来往对账</div>
              </div>
            </el-row>
          </el-card>

          <el-card :body-style="{ padding: `8px 10px` }" shadow="hover">
            <el-row justify="space-between" style="padding: 0 11px;margin-top: 10px;">
              <h4>最近操作</h4>
            </el-row>
            <el-row>
              <el-tag v-for="(item, index) in procureLogList" :key="index" size="small" style="margin-right:10px;margin-top:20px;">{{ item }}</el-tag>
            </el-row>
          </el-card>

          <el-card :body-style="{ padding: `8px 10px` }" shadow="hover">
            <div class="card-item">
              <el-row align="middle" style="justify-content: center">基础信息</el-row>
              <div class="card-list">
                <el-row align="middle" class="list-cell">
                  <label class="label-tips-info" style="line-height: 24px">来源</label>
                  <el-select v-if="isEdit" v-model="form.source" placeholder="请选择来源" style="width:120px;" size="small" disabled>
                    <el-option v-for="item in sourceList" :key="item.id" :label="item.name" :value="item.value"/>
                  </el-select>
                  <el-select v-else v-model="editForm.source" placeholder="请选择来源" style="width:120px;" size="small">
                    <el-option v-for="item in sourceList" :key="item.id" :label="item.name" :value="item.value"/>
                  </el-select>
                </el-row>
                <el-row align="middle" class="list-cell">
                  <label class="label-tips-info" style="line-height: 24px">供应商级别</label>
                  <el-select v-if="isEdit" v-model="form.level" placeholder="请选择供应商级别" style="width:120px;" size="small" disabled>
                    <el-option v-for="item in levelList" :label="item.label" :value="item.value"/>
                  </el-select>
                  <el-select v-else v-model="editForm.level" placeholder="请选择供应商级别" style="width:120px;" size="small">
                    <el-option v-for="item in levelList" :label="item.label" :value="item.value"/>
                  </el-select>
                </el-row>
                <el-row align="middle" class="list-cell">
                  <label class="label-tips-info">地址</label>
                  <div class="label-content">
                    <span v-if="isEdit" style="width: 75%;display: block">{{ form.address }}</span>
                    <el-input v-else v-model="editForm.address" placeholder="请输入地址" size="small"/>
                  </div>
                </el-row>
                <el-row align="middle" class="list-cell">
                  <label class="label-tips-info">经营范围</label>
                  <div class="label-content">
                    <span v-if="isEdit">{{ form.range || '-' }}</span>
                    <el-input v-else v-model="editForm.range" placeholder="请输入经营范围" size="small"/>
                  </div>
                </el-row>
                <el-row align="middle" class="list-cell">
                  <label class="label-tips-info">网址</label>
                  <div class="label-content">
                    <span v-if="isEdit">{{ form.url || '-' }}</span>
                    <el-input v-else v-model="editForm.url" placeholder="请输入网址" size="small"/>
                  </div>
                </el-row>
                <el-row align="middle" class="list-cell">
                  <label class="label-tips-info" style="line-height: 34px">电商平台</label>
                  <div class="label-content">
                    <el-select
                        v-if="isEdit"
                        v-model="form.platform"
                        multiple
                        filterable
                        allow-create
                        default-first-option
                        :reserve-keyword="false"
                        disabled
                        size="small"
                        style="width:220px"
                    >
                      <el-option v-for="item in eCommercePlatformList" :key="item.value" :label="item.label" :value="item.value"/>
                    </el-select>
                    <el-select
                        v-else
                        v-model="editForm.platform"
                        multiple
                        filterable
                        allow-create
                        default-first-option
                        :reserve-keyword="false"
                        placeholder="请选择电商平台"
                        size="small"
                        style="width:220px"
                    >
                      <el-option v-for="item in eCommercePlatformList" :key="item.value" :label="item.label" :value="item.value"/>
                    </el-select>
                  </div>
                </el-row>
              </div>
            </div>

            <div class="card-item" style="margin-top: 20px">
              <el-row align="middle" style="justify-content: center;">收款信息</el-row>
              <div class="card-list">
                <el-row align="middle" class="list-cell">
                  <label class="label-tips-info">收款单位</label>
                  <div class="label-content">
                    <span v-if="isEdit">{{ form.receiptName }}</span>
                    <el-input v-else v-model="editForm.receiptName" placeholder="请输入收款单位" size="small"/>
                  </div>
                </el-row>
                <el-row align="middle" class="list-cell">
                  <label class="label-tips-info">识别号</label>
                  <div class="label-content">
                    <span v-if="isEdit">{{ form.identifyNo }}</span>
                    <el-input v-else v-model="editForm.identifyNo" placeholder="请输入识别号" size="small"/>
                  </div>
                </el-row>
                <el-row align="middle" class="list-cell">
                  <label class="label-tips-info">银行帐号</label>
                  <div class="label-content">
                    <span v-if="isEdit">{{ form.bankAccount || '-' }}</span>
                    <el-input v-else v-model="editForm.bankAccount" placeholder="请输入银行帐号" size="small"/>
                  </div>
                </el-row>
                <el-row align="middle" class="list-cell">
                  <label class="label-tips-info">银行信息</label>
                  <div class="label-content">
                    <span v-if="isEdit">{{ form.bankName || '-' }}</span>
                    <el-input v-else v-model="editForm.bankName" placeholder="请输入银行信息" size="small"/>
                  </div>
                </el-row>
              </div>
            </div>

            <div class="card-item" style="margin-top: 20px">
              <el-row align="middle" style="justify-content: center;margin-bottom: 10px">
                <span style="margin-right: 10px">联系人</span>
                <el-icon color="var(--el-color-primary)" style="cursor:pointer;" @click="contactVisible = true">
                  <ele-Edit/>
                </el-icon>
              </el-row>
              <div class="card-list">
                <el-table size="small" :data="contactList" border>
                  <el-table-column label="联系人" align="center" prop="name"></el-table-column>
                  <el-table-column label="职位" align="center" prop="position"></el-table-column>
                  <el-table-column label="手机号码" align="center" prop="phone"></el-table-column>
                  <el-table-column label="微信/邮箱" align="center">
                    <template v-slot="{row}">
                      <span>{{ row.wechat == 1 ? row.phone : row.wechat }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" align="center">
                    <el-button size="small" type="primary" text>沟通记录</el-button>
                  </el-table-column>
                </el-table>
              </div>
            </div>

            <div class="card-item" style="margin-top: 20px">
              <el-row align="middle" justify="center" style="margin-bottom: 10px">
                <span style="margin-right: 10px">供应商评分</span>
                <el-icon v-if="isEditStar" color="var(--el-color-primary)" style="cursor:pointer" @click="isEditStar = false">
                  <ele-Edit/>
                </el-icon>
                <el-button v-else type="primary" :icon="Check" size="small" text @click="isEditStar = true">完成</el-button>
              </el-row>
              <el-row v-for="item in starList" :key="item.id">
                <el-col :span="8" style="line-height: 24px;text-align: center">{{ item.name }}</el-col>
                <el-col :span="8">
                  <el-rate size="small" v-model="item.score" :disabled="isEditStar" @change="changeRate(item)"/>
                </el-col>
                <el-col :span="8">
                  <el-button size="small" type="warning" :icon="Edit" text @click="openRate(item)" v-if="!isEditStar">编辑</el-button>
                  <el-button size="small" type="danger" style="margin: 0" :icon="Delete" text @click="starRemove(item.id)" v-if="!isEditStar">删除</el-button>
                </el-col>
              </el-row>
              <el-row style="margin-top: 10px" justify="center">
                <el-button v-if="!isEditStar" :icon="CirclePlus" type="primary" size="small" @click="openRate(null)">添加评分项</el-button>
              </el-row>
            </div>

            <div class="card-item" style="margin: 20px 15px 0">
              <el-row align="middle" style="justify-content: center;margin-bottom: 10px">
                <span style="margin-right: 10px">画像标签</span>
                <el-icon color="var(--el-color-primary)" style="cursor:pointer" @click="labelTableVisible = true">
                  <ele-Edit/>
                </el-icon>
              </el-row>
              <div class="card-list">
                <el-tag v-for="tag in labelList" :key="tag.id" closable size="small" style="margin: 0 5px 8px 0" effect="dark" @close="submitRemoveLabel(tag)">{{ tag.label }}</el-tag>
              </div>
            </div>
          </el-card>
        </el-col>

        <el-col :span="16">
          <el-card :body-style="{ padding: `14px 10px 16px` }" shadow="hover">
            <el-row align="middle">
              <el-col :span="2" class="stage-tip">供应商阶段</el-col>
              <el-col :span="13" style="height: 100%">
                <tree-line :data="stageList" :active="form.stage" @getItem="toStage"/>
              </el-col>
              <el-col :span="9" style="height: 100%;text-align: right">
                <el-row align="middle" justify="center" class="single-stage">
                  <el-col :span="6" @click="terminal" :style="form.state == -1 ? 'color: #E6A23C' : ''">{{ form.stopDate }}</el-col>
                </el-row>
                <el-row align="middle" justify="center" class="single-stage">
                  <el-col style="margin-top: 10px" :span="6" @click="terminal" :style="form.state == -1 ? 'color: #E6A23C' : ''">终止</el-col>
                </el-row>
              </el-col>
            </el-row>


            <div class="action-card">
              <h4 style="display: inline-block;writing-mode:vertical-lr;">采购单阶段</h4>
              <div style="display: inline-block;width: 95%;margin-left: 20px;">
                <el-row style="margin-top: 10px;" v-for="purchaseOrder in purchaseOrderList">
                  <div class="tips-cell-procure">
                    <div class="tips-item">
                      <span class="tips-name">{{ purchaseOrder.orderNo }}</span>
                    </div>
                  </div>
                  <div class="tips-cell-procure" v-for="(item, index) in disuseStatus" :key="item.id">
                    <div class="tips-item" :class="{'tips-item-border':item.name === '待付款' }">
                      <span class="tips-name" v-if="item.name !== '待付款'" :style="purchaseOrder.stage == item.value ? 'color: #18A058' : ''">{{ item.name }}</span>
                      <div class="pie" v-else>
                        <div class="circle" :style="purchaseOrder.stage == item.value ? 'color: #18A058' : ''">{{ item.name }}</div>
                        <div class="left">
                          <div class="left-deg"></div>
                        </div>
                        <div class="right">
                          <div class="right-deg"></div>
                        </div>
                      </div>
                      <!--                      <span class="tips-name" :class="{'tips-name-border':item.name === '待付款' }">{{ item.name }}</span>-->
                      <el-icon v-if="item.value != 11 && item.value != 9 && item.value != 12 && item.value != 4 && item.value != 3">
                        <ele-DArrowRight/>
                      </el-icon>
                    </div>
                  </div>
                  <el-button size="small" class="tree-line-btn" @click="toPurchaseOrder(purchaseOrder)">查看采购单详情</el-button>
                </el-row>

              </div>
            </div>
          </el-card>

          <el-card :body-style="{ padding: `14px 10px 16px` }" shadow="hover">
            <el-row align="middle" justify="space-between">
              <h4>行动/事项</h4>
              <el-row align="middle" justify="end">
                <div align="middle" class="title-item" @click="openMaterial('doc')">
                  <el-icon color="var(--next-bg-menuBar-light-1)" size="16px">
                    <ele-Document/>
                  </el-icon>
                  <span class="tips">文档</span>
                  <span>{{ docNumber.docNum }}</span>
                </div>
                <div align="middle" class="title-item" @click="openMaterial('file')">
                  <el-icon color="var(--next-bg-menuBar-light-1)" size="16px">
                    <ele-Link/>
                  </el-icon>
                  <span class="tips">附件</span>
                  <span>{{ docNumber.attachNum }}</span>
                </div>
              </el-row>
            </el-row>

            <el-row align="middle" :gutter="24" style="margin-top:20px;">
              <!--              <el-col :span="4" style="margin-bottom: 20px;" v-for="(item,index) in matterTypeList" :key="index" class="showFinger">-->
              <!--                <div :class="['action-cell', selIndex === index?'activity':'']" @click="openTable(item, index)">-->
              <!--                  <div class="action-top">-->
              <!--                    <i :class="matterIcon[item.code]"></i>-->
              <!--                    <span class="action-tips">{{ codeDict[item.code] }}</span>-->
              <!--                  </div>-->
              <!--                  <p class="action-data">{{ item.number }}</p>-->
              <!--                </div>-->
              <!--              </el-col>-->
              <div class="action-cell" @click="openMatterTable('ENQUIRY_PRICE','询价')">
                <div class="action-top">
                  <i class="fa fa-whatsapp"></i>
                  <span class="action-tips">询价</span>
                </div>
                <p class="action-data">{{ actionsMatters.askCount }}</p>
              </div>
              <div class="action-cell" @click="skip('purchase')">
                <div class="action-top">
                  <el-icon size="16px">
                    <ele-Tickets/>
                  </el-icon>
                  <span class="action-tips">采购单</span>
                </div>
                <p class="action-data">{{ actionsMatters.purchaseCount }}</p>
              </div>
              <div class="action-cell" @click="openMatterTable('WORK_CONTACT_LETTER','工作联系函')">
                <div class="action-top">
                  <el-icon size="16px">
                    <ele-DocumentDelete/>
                  </el-icon>
                  <span class="action-tips">工作联系函</span>
                </div>
                <p class="action-data">{{ actionsMatters.contactCount }}</p>
              </div>
            </el-row>
          </el-card>

          <el-card :body-style="{ padding: `8px 10px` }" shadow="hover">
            <template #header>
              <el-row>
                <el-col :span="2">行动事项</el-col>
                <el-col :span="4" style="margin-left: 15px">
                  <el-date-picker style="width: 100%" v-model="matterParams.actionTime" type="date" placeholder="请选择事项日期" value-format="YYYY-MM-DD" size="small" clearable/>
                </el-col>
                <el-col :span="4" :offset="1">
                  <el-input size="small" v-model="matterParams.title" placeholder="事项主题" clearable/>
                </el-col>
                <el-icon color="var(--next-bg-menuBar-light-1)" size="16px" style="height: 24px;margin-left: 15px">
                  <ele-Search/>
                </el-icon>
              </el-row>
            </template>
            <el-table :data="matterList" stripe size="small" style="height: 100%" max-height="700px" v-loading="loading">
              <el-table-column label="日期" width="260">
                <template v-slot="{ row }">
                  {{ row.actionStartTime }}{{ row.actionStartTime == row.actionEndTime ? '' : ' ~ ' + row.actionEndTime }}
                </template>
              </el-table-column>
              <el-table-column label="事项类型" prop="codeName" width="120"/>
              <el-table-column label="事项主题" prop="title" width="150"/>
              <el-table-column label="执行人" prop="executorNames"/>
              <el-table-column label="事项状态" width="100">
                <template v-slot="{ row }">
                  {{ row.state == 0 ? '未开始' : (row.state == 1 ? '进行中' : '已完成') }}
                </template>
              </el-table-column>
              <el-table-column label="操作" width="135">
                <template v-slot="{ row }">
                  <el-button size="small" type="primary" @click="editMatter(row)">编辑</el-button>
                  <el-button size="small" type="danger" @click="delMatter(row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>

            <div class="page-block">
              <el-pagination v-model:currentPage="matterParams.current" v-model:page-size="matterParams.size" :page-sizes="[10, 20, 30, 40]" :small="true" :disabled="false" :background="false" layout="total, sizes, prev, pager, next, jumper" :total="matterTotal" :hide-on-single-page="true" @size-change="matterSize" @current-change="matterCurrent"/>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div class="tabs-list">
      <div class="close-btn" @click="drawer = false">
        <el-icon color="var(--next-color-white)" size="28px">
          <ele-CircleClose/>
        </el-icon>
      </div>
    </div>

    <div class="fixed-right">
      <div class="fixed-matter-cell" @click="openMatter">
        <el-icon>
          <ele-Plus/>
        </el-icon>
      </div>
      <!-- <div class="fixed-cell" @click="openEdit">
          <el-icon>
              <ele-Edit/>
          </el-icon>
      </div> -->
      <!--      <div v-if="scrollTop > 100" class="fixed-cell" @click="backTop">
              <el-icon>
                <ele-CaretTop/>
              </el-icon>
            </div>-->
    </div>

    <!--    联系人表格-->
    <el-dialog title="联系人列表" v-model="contactVisible" :close-on-click-modal="false" destroy-on-close width="900px" @close="contactVisible = false">
      <el-button type="primary" size="small" style="margin-bottom: 5px;float: right;" :icon="CirclePlus" @click="openContact(null)">添加</el-button>
      <el-table :data="contactList" size="small" stripe border :cell-style="{textAlign: 'center'}" :header-cell-style="{textAlign: 'center', background: 'var(--el-color-primary-light-9)', color: 'var(--next-bg-menuBar-light-1)', border: '1px solid var(--el-table-border-color)'}">
        <el-table-column label="联系人" prop="name"/>
        <el-table-column label="职位" prop="position"/>
        <el-table-column label="角色" prop="roleName"/>
        <el-table-column label="手机号码" prop="phone"/>
        <el-table-column label="微信/邮箱">
          <template v-slot="{row}">
            <span>{{ row.wechat == 1 ? row.phone : row.wechat }}</span>
          </template>
        </el-table-column>
        <el-table-column label="主要联系人">
          <template v-slot="{row}">
            <el-tag :type="row.type == 1 ? '' : 'danger'">{{ row.type == 1 ? '是' : '否' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="140">
          <template v-slot="{row}">
            <el-button type="warning" :icon="Edit" text size="small" @click="openContact(row)">编辑</el-button>
            <el-button type="danger" :icon="Delete" text size="small" @click="submitRemoveContact(row)">移除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <el-button size="small" @click="contactVisible = false">关闭</el-button>
      </template>
    </el-dialog>

    <!-- 添加联系人 -->
    <el-dialog v-model="contactFormVisible" title="联系人" :append-to-body="true" width="570px">
      <el-form :model="contactForm" :rules="contactRules" size="small" ref="ruleFormRef" label-width="110px">
        <el-form-item label="联系人:" prop="name">
          <el-input v-model="contactForm.name" placeholder="联系人" style="width: 250px"/>
          <el-checkbox v-model="contactForm.type" label="main" size="small" :true-label="1" :false-label="0" style="margin-left: 10px">主要联系人</el-checkbox>
        </el-form-item>
        <el-form-item label="手机号码:" prop="phone">
          <el-input v-model="contactForm.phone" placeholder="手机号码" style="width: 250px"/>
          <el-checkbox v-model="contactForm.wechat" label="wei" size="small" :true-label="1" :false-label="0" style="margin-left: 10px;">微信同号</el-checkbox>
        </el-form-item>
        <el-form-item label="职位:" prop="position">
          <el-input v-model="contactForm.position" placeholder="职位" style="width: 250px"/>
        </el-form-item>
        <el-form-item label="角色:" prop="roleName">
          <el-input v-model="contactForm.roleName" placeholder="角色" style="width: 250px"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button size="small" @click="contactFormVisible = false">取消</el-button>
        <el-button size="small" type="primary" :icon="Check" @click="submitContact(ruleFormRef)">提交</el-button>
      </template>
    </el-dialog>

    <!-- 共享表格 -->
    <el-dialog v-model="shareVisible" title="共享" width="40%">
      <el-transfer v-model="shareUserIds" :data="enterpriseUsers" class="shareTransfer"
                   :props="transferProps" :titles="['未共享', '已共享']"
                   filter-placeholder="搜索名称" filterable
      />
      <template #footer>
          <span class="dialog-footer">
            <el-button size="small" @click="shareVisible = false">关闭</el-button>
            <el-button size="small" type="primary" :icon="Check" @click="shareSupplier">提交</el-button>
          </span>
      </template>
    </el-dialog>

    <!-- 画像标签表格 -->
    <el-dialog v-model="labelTableVisible" title="画像标签" destroy-on-close top="5vh" width="600px">
      <el-row>
        <el-col>
          <el-button type="primary" size="small" style="margin-bottom: 5px;float: right;" :icon="CirclePlus" @click="handleCreateLabel">添加</el-button>
        </el-col>
      </el-row>
      <el-table :data="labelList" size="small" stripe border :cell-style="{textAlign: 'center'}" :header-cell-style="{
        textAlign: 'center',
        background: 'var(--el-color-primary-light-9)',
        color: 'var(--next-bg-menuBar-light-1)',
        border: '1px solid var(--el-table-border-color)'}">
        <el-table-column label="标签">
          <template v-slot="{row}">
            <el-input v-model="row.label" @blur="labelBlur(row)" size="small"/>
          </template>
        </el-table-column>
        <el-table-column label="创建人" prop="createBy" width="120"/>
        <el-table-column label="创建时间" prop="createTime" width="150"/>
        <el-table-column label="操作" width="100">
          <template v-slot="{row}">
            <el-button type="danger" :icon="Delete" size="small" @click="submitRemoveLabel(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
          <span class="dialog-footer">
            <el-button size="small" @click="labelTableVisible = false">关闭</el-button>
          </span>
      </template>
    </el-dialog>

    <!-- 评分项 -->
    <el-dialog v-model="gradeVisible" title="评分项" destroy-on-close width="400px">
      <el-form :model="gradeForm" size="small">
        <el-form-item prop="name" label="名称">
          <el-input v-model="gradeForm.name" maxlength="8" clearable placeholder="请填写评分项名称"/>
        </el-form-item>
        <el-form-item prop="score" label="评分">
          <el-rate v-model="gradeForm.score"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button size="small" @click="gradeVisible = false">关 闭</el-button>
        <el-button size="small" type="primary" @click="submitGrade">保 存</el-button>
      </template>
    </el-dialog>

    <launch-matter
        v-model:visible="matterVisible"
        v-model:relate-item="relateItem"
        v-model:detail-form="detailData"
        module-code="Supplier"
        @closeCallback="closeCallback"
    />

<!--    事项列表-->
    <matterPage
        v-model:code="tableCode"
        :supplierId="form.id"
        v-model:dialogVisible="matterTableVisible"
        :title="tableTitle"
        :enterpriseUsers="enterpriseUsers"
        :remindTimes="remindTimes"
    />

    <communication v-model:code="selectedCode" v-model:relate-item="relateItem" v-model:enterprise-users="enterpriseUsers" :supplier-id="form.id"/>
    <minimalism v-model:code="selectedCode" v-model:relate-item="relateItem" v-model:enterprise-users="enterpriseUsers" v-model:remind-times="remindTimes"/>
    <enquiry-price v-model:code="selectedCode" :supplier-id="form.id"/>
    <work-contact-letter v-model:code="selectedCode" :supplier-id="form.id"/>
    <purchase-order v-model:code="selectedCode" :supplier="form.id"/>
    <quotation-order v-model:code="selectedCode" :supplier-id="form.id"/>
  </el-drawer>
</template>

<script setup>
import {computed, onMounted, reactive, ref, toRefs} from 'vue'
import {useRouter} from 'vue-router'
import TreeLine from '/@/components/treeLine/index.vue'
import {Check, CirclePlus, DataLine, Delete, Edit, Finished, Pointer, RefreshLeft, CloseBold} from '@element-plus/icons-vue'
import supplierContactApi from '/@/api/supplier/supplierContact'
import supplierGradeApi from '/@/api/supplier/supplierGrade'
import supplierApi from '/@/api/supplier/index'
import supplierLabelApi from '/@/api/supplier/supplierLabel'
import {ElMessage, ElMessageBox} from 'element-plus'
import purchaseOrderApi from '/@/api/supplier/purchaseOrder'
import {getEnterpriseUsers} from '/@/api/sys/user'
import Cookies from 'js-cookie'
import {getInfoMatterPage, deleteMatter, modifyMatter} from '/@/api/matter'
import {getDictByCodes} from '/@/api/sys/dict'
import LaunchMatter from '/@/views/matter/LaunchMatter.vue'
import {getProductRecords} from '/@/api/supplier'
import Minimalism from '/@/views/matter/common/Minimalism.vue'
import Communication from '/@/views/matter/common/Communication.vue'
import EnquiryPrice from '/@/views/matter/supplier/EnquiryPrice.vue'
import PurchaseOrder from '/@/views/matter/supplier/PurchaseOrder.vue'
import QuotationOrder from '/@/views/matter/supplier/QuotationOrder.vue'
import WorkContactLetter from '/@/views/matter/supplier/WorkContactLetter.vue'
import MatterPage from '/@/views/procure/components/MatterPage.vue'
import {getMatterCount , getRemindTimes , getRelateItems} from "../../../api/matter";

const router = useRouter()
const props = defineProps({
  dialogDrawer: {
    props: Boolean,
    default: false
  },
  form: {
    type: Object,
    default() {
      return {}
    }
  },
  SupplierSource: {
    type: Array,
    default() {
      return {}
    }
  },
  SupplierStage: {
    type: Array,
    default() {
      return {}
    }
  }
})
const {dialogDrawer, form, SupplierSource, SupplierStage} = toRefs(props)
let scrollTop = ref(0)
const ruleFormRef = ref()
let disuseStatus = [
  {value: 6, name: '待审批'},
  {value: 7, name: '已审批'},
  {value: 0, name: '待付款'},
  {value: 1, name: '待发货'},
  {value: 2, name: '待收货'}, // 已发货
  {value: 3, name: '执行完毕'},
  {value: 11, name: '重发补发'},
  {value: 9, name: '待退货'},
  {value: 12, name: '退货完毕'},
  {value: 4, name: '取消订单'}
]

let contactForm = ref({
  id: null,
  name: null,
  position: null,
  roleName: null,
  phone: null,
  supplierInfoId: null,
  wechat: 1,
  type: 0
})

let procureLogList = ['工作联第函', '新建采购单', '询价']
let pageSize = ref(document.body.clientWidth <= 1400 ? '1220px' : '85%')
let isEdit = ref(true)
let isEditStar = ref(true)
let gradeVisible = ref(false)

// 事项
let matterVisible = ref(false)
let matterTableVisible = ref(false)
let relateItem = ref({})
let detailData = ref({})
let selectedCode = ref('')
let tableCode = ref('')
let remindTimes = ref([])
let tableTitle = ref('')

// 评分项
let gradeForm = ref({
  id: null,
  supplierInfoId: null,
  name: null,
  score: 0
})
let stageList = ref({
  common: [{
    label: '线索',
    time: '',
    value: '0'
  }, {
    label: '需求沟通',
    time: '',
    value: '1'
  }, {
    label: '报价',
    time: '',
    value: '2'
  }, {
    label: '合同订单',
    time: '',
    value: '3'
  }]
})
//行动/事项 参数
let actionsMatters = reactive({
  askCount: 0,
  purchaseCount: 0,
  contactCount: 0
})

// 联系人表格
let contactVisible = ref(false)
// 联系人添加/编辑对话框
let contactFormVisible = ref(false)
let shareVisible = ref(false)
let labelTableVisible = ref(false)

let transferProps = ref({
  key: 'userId',
  label: 'nickname'
})
let shareUserIds = ref([])
let enterpriseUsers = ref([])

// 电商平台
let eCommercePlatformList = ref([{value: '17购', label: '17购'}, {value: '淘宝', label: '淘宝'}, {value: '天猫', label: '天猫'}, {value: '京东', label: '京东'}])
let contactList = ref([])
let productList = ref([])
let sourceList = ref([])
let starList = ref([])
let labelList = ref([])
let purchaseOrderList = ref([])
let dictMap = ref({
  SupplierStage: []
})
let contactRules = {
  name: {required: true, message: '请填写联系人名称', trigger: 'blur'},
  phone: {required: true, pattern: /^[1][3,4,5,6.7,8,9][0-9]{9}$/, message: '请填写手机号', trigger: 'blur'}
}
let docNumber = reactive({
  docNum: '1',
  attachNum: '1'
})
// 事项列表查询参数
let matterParams = ref({
  current: 1,
  size: 10,
  moduleCode: 'Supplier',
  dataId: null,
  actionTime: null,
  title: null
})
let loading = ref(false)  // 事项表格加载中标记
let matterTotal = ref(0)
// 事项列表
let matterList = ref([])
// 编辑form
let editForm = ref({
  id: null,
  source: null,
  level: null,
  address: null,
  range: null,
  url: null,
  platform: null,
  receiptName: null,
  identifyNo: null,
  bankAccount: null,
  bankName: null
})
let levelList = [{label: 'A', value: 'A'}, {label: 'B', value: 'B'}, {label: 'C', value: 'C'}, {label: 'D', value: 'D'}]
const emit = defineEmits(['onSubmit', 'update:dialogDrawer'])
let drawer = computed({
  get: () => {
    if (dialogDrawer.value) {
      //获取提醒（通知）时间列表
      getRemindTimes().then(res => remindTimes.value = res.data).catch(e => console.log(e))
      //获取可关联项一级对象 !此处不确定是否可以省略!
      getRelateItems().then(res => {
        for (let i = 0; i < res.data.length; i++) {
          if(res.data[i].code === 'Supplier'){
            relateItem.value = res.data[i]
            break;
          }
        }
      }).catch(e => console.log(e))
      // 获取联系人
      getContactList()
      // 获取供应产品
      getProductRecords(form.value.enterpriseId).then(res => {
        productList.value = res.data
      }).catch(e => console.log(e))
      // 先获取阶段列表, 获取阶段信息
      getDictByCodes(['SupplierStage']).then(res => {
        dictMap.value = res.data
        stageList.value.common = []
        supplierApi.getStageRecord({supplierInfoId: form.value.id}).then(res => {
          if (res.data) {
            dictMap.value.SupplierStage.forEach(item => {
              stageList.value.common.push({
                label: item.name,
                time: res.data[item.value] || '',
                value: item.value
              })
            })
          }
        })
      })
      // 获取关联采购单
      purchaseOrderApi.getPurchaseOrderPageBySupplierInfoId({supplierInfoId: form.value.id, current: 1, size: 5}).then(res => {
        purchaseOrderList.value = res.data.records
        actionsMatters.purchaseCount = res.data.total
      })
      // 获取企业成员
      getEnterpriseUsers().then(res => enterpriseUsers.value = res.data).catch(e => console.log(e))
      // 获取共享的用户id列表
      supplierApi.getShareUsers(form.value.id).then(res => shareUserIds.value = res.data).catch(e => console.log(e))
      // 获取画像标签数据
      getLabelList()
      // 获取评分数据
      getStarList()
      // 事项列表
      matterParams.value.dataId = form.value.id
      getMatterPage()
      //初始化来源数组
      sourceList.value = SupplierSource.value
      //解析电商平台数组
      if (form.value.platform && form.value.platform.includes(',')) {
        form.value.platform = form.value.platform.split(',')
      } else {
        form.value.platform = []
      }
      //事项数据统计
      getMatterData()
    }
    return dialogDrawer.value
  },
  set: val => {
    emit('update:dialogDrawer', val)
  }
})

const getStarList = () => supplierGradeApi.getGradeList(form.value.id).then(res => starList.value = res.data).catch(e => console.log(e))

const getLabelList = () => supplierLabelApi.getLabelList({supplierInfoId: form.value.id}).then(res => labelList.value = res.data).catch(e => console.log(e))

const close = () => emit('onSubmit')

//获取事项统计数据
const getMatterData = () => {
  getMatterCount({code:'Supplier',supplierInfoId:form.value.id}).then(res => {
    for (let i = 0; i < res.data.length; i++) {
      //TODO 后期如果继续增多得改用switch
      if(res.data[i].code === 'ENQUIRY_PRICE'){
        actionsMatters.askCount = res.data[i].dataNum
      }else if(res.data[i].code === 'WORK_CONTACT_LETTER'){
        actionsMatters.askCount = res.data[i].dataNum
      }
    }
  })
}
// 供应商状态设置为终止
const terminal = () => {
  if (form.value.state == -1) {
    return ElMessage.warning('该供应商已经是终止状态！')
  }
  supplierApi.modifyState({
    id: form.value.id,
    state: -1
  }).then(res => {
    if (res.data) {
      form.value.state = -1
      ElMessage.success('修改成功')
    }
  }).catch(e => console.log(e))
}

// 事项页码变化
const matterCurrent = (current) => {
  matterParams.current = current
  getMatterPage()
}
// 事项每页数量变化
const matterSize = (size) => {
  matterParams.size = size
  matterCurrent(1)
}
// 事项分页数据
const getMatterPage = () => {
  loading.value = true
  getInfoMatterPage(matterParams.value).then(res => {
    matterList.value = res.data.records
    matterTotal.value = res.data.total
    loading.value = false
  }).catch(e => {
    loading.value = false
    console.log(e)
  })
}
/**
 * 拉起事项，编辑
 */
const editMatter = (matter) => {
  // TODO 打开事项表单需要先打开发起事项页 然后再拉起事项....
  selectedCode.value = matter.code
}
/**
 * 删除事项
 */
const delMatter = (matter) => {
  ElMessageBox.confirm(`确定删除“${matter.title}”？`, '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    deleteMatter(matter).then(res => {
      if (res.data) {
        ElMessage.success('删除成功！')
        getMatterPage()
      }
    }).catch(e => console.log(e))
  }).catch(() => {});
}

// 画像标签表格失去焦点时触发
const labelBlur = (row) => {
  if (row.id) {
    supplierLabelApi.edit(row).then(res => {
      if (res.data) {
        ElMessage.success('修改成功！')
        getLabelList()
      }
    }).catch(e => console.log(e))
  } else {
    supplierLabelApi.create({
      label: row.label,
      supplierInfoId: form.value.id
    }).then(res => {
      if (res.data) {
        ElMessage.success('添加成功！')
        getLabelList()
      }
    }).catch(e => console.log(e))
  }
}

//修改分数
const changeRate = (row) => {
  supplierGradeApi.edit(row).then(res => {
    if (res.data) {
      getStarList()
      ElMessage.success('修改成功！')
    }
  })
}

// 打开文档弹框
const openMaterial = (type) => {

}

// 获取联系人列表
const getContactList = () => {
  supplierContactApi.getContactList(form.value.id).then(res => {
    contactList.value = res.data
  })
}

//  删除联系人
const submitRemoveContact = (row) => {
  ElMessageBox.confirm('确定删除？', {
    confirmButtonText: '删除',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    supplierContactApi.delete({id: row.id}).then(res => {
      if (res) {
        ElMessage.success('删除成功!')
        getContactList()
      }
    })
  })
}

// 共享供应商
const shareSupplier = () => {
  ElMessageBox.confirm('确定共享供应商？', {
    confirmButtonText: '共享',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    if (shareUserIds.value.length > 0) {
      supplierApi.shareSupplier({supplierInfoId: form.value.id, userIds: shareUserIds.value}).then(res => {
        if (res.data) {
          ElMessage.success('共享成功!')
          shareVisible.value = false
        }
      }).catch(e => console.log(e))
    } else {
      ElMessage.error('未选择共享人!')
    }
  })
}

//解除绑定
const relieveBound = () => {
  ElMessageBox.confirm('确定解除绑定？', {
    confirmButtonText: '解除',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const userId = Cookies.get('userId')
    supplierApi.relieveBound({supplierInfoId: form.value.id, userId: userId}).then(res => {
      if (res.data == false || res.data == 'false') {
        ElMessageBox.confirm(res.message, {
          confirmButtonText: '删除',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          supplierApi.delete({id: form.value.id}).then(res => {
            if (res) {
              ElMessage.success('删除成功!')
              emit('update:dialogDrawer', false)
            }
          })
        })
      } else {
        ElMessage.success('解除成功!')
        getContactList()
      }
    })
  })
}

// 开启编辑
const toEdit = () => {
  editForm.value = JSON.parse(JSON.stringify(form.value))
  isEdit.value = false
}

//添加画像标签
const handleCreateLabel = () => {
  labelList.value.push({
    id: null,
    supplierInfoId: form.value.id,
    userId: null,
    label: ''
  })
}

// 删除画像标签
const submitRemoveLabel = (row) => {
  supplierLabelApi.remove({id: row.id}).then(res => {
    if (res.data) {
      ElMessage.success('删除成功!')
      getLabelList()
    }
  }).catch(e => console.log(e))
}

// 打开联系人添加/编辑
const openContact = (row) => {
  if (row && row.id) {
    contactForm.value = JSON.parse(JSON.stringify(row))
  } else {
    contactForm.value = {
      id: null,
      name: null,
      position: null,
      roleName: null,
      phone: null,
      supplierInfoId: form.value.id,
      wechat: 1,
      type: 0
    }
  }
  contactFormVisible.value = true
}

// 重置联系人Form
const resetContactForm = () => {
  contactForm.value = {
    id: null,
    name: null,
    position: null,
    roleName: null,
    phone: null,
    supplierInfoId: form.value.id,
    wechat: 1,
    type: 0
  }
  contactFormVisible.value = false
}

// 修改负责人
const mainContactChange = (val) => {
  contactList.value.forEach(item => {
    if (item.id == val) {
      form.value.mainContact.phone = item.phone
      form.value.mainContact.name = item.name
    }
  })
}

// 修改阶段
const toStage = (stage) => {
  supplierApi.modifyStage({
    id: form.value.id,
    stage: stage.value
  }).then(res => {
    if (res.data) {
      form.value.stage = stage.value
      for (let i = 0; i < stageList.value.common.length; i++) {
        let stageItem = stageList.value.common[i]
        if (stageItem.value == stage.value) {
          // data返回阶段记录时间
          stageItem.time = res.data
          form.value.stage = stage.value
          break
        }
      }
    }
  }).catch(e => console.log(e))
}

const editDetail = () => {
  const params = JSON.parse(JSON.stringify(editForm.value))
  // 转化为String
  params.platform = params.platform.join(',')
  supplierApi.edit(params).then(res => {
    if (res.data) {
      isEdit.value = true
      // 不能直接改
      // form.value = JSON.parse(JSON.stringify(editForm.value))
      form.value.purchaseUserId = editForm.value.purchaseUserId
      form.value.productName = editForm.value.productName
      form.value.source = editForm.value.source
      form.value.state = editForm.value.state
      form.value.stage = editForm.value.stage
      form.value.amount = editForm.value.amount
      form.value.payAmount = editForm.value.payAmount
      form.value.debt = editForm.value.debt
      form.value.bill = editForm.value.bill
      form.value.address = editForm.value.address
      form.value.receiptName = editForm.value.receiptName
      form.value.identifyNo = editForm.value.identifyNo
      form.value.bankAccount = editForm.value.bankAccount
      form.value.bankName = editForm.value.bankName
      form.value.url = editForm.value.url
      form.value.businessScope = editForm.value.businessScope
      form.value.level = editForm.value.level
      form.value.platform = editForm.value.platform
      ElMessage.success('修改成功!')
    }
  })
}

const toPurchaseOrder = (row) => {
  // 跳转采购单
  router.push({name: 'purchase', params: {id: row.id}})
}

const skip = (val) => {
  router.push({name: val})
}

// 添加/编辑评分项
const submitGrade = async () => {
  let res
  try {
    if (gradeForm.value.id) {
      res = await supplierGradeApi.edit(gradeForm.value)
    } else {
      res = await supplierGradeApi.create(gradeForm.value)
    }
    if (res.data) {
      ElMessage.success('保存成功！')
      gradeVisible.value = false
      gradeForm.value = {
        id: null,
        supplierInfoId: null,
        name: null,
        score: null
      }
      getStarList()
    }
  } catch (e) {
    console.log(e)
  }
}

// 删除评分
const starRemove = (id) => {
  ElMessageBox.confirm('确定删除？', {
    confirmButtonText: '删除',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    supplierGradeApi.delete({id: id}).then(res => {
      if (res.data) {
        ElMessage.success('删除成功！')
        getStarList()
      }
    }).catch(e => console.log(e))
  })
}

// 打开编辑评分项
const openRate = (item) => {
  if (item && item.id) {
    gradeForm.value = JSON.parse(JSON.stringify(item))
  } else {
    gradeForm.value = {
      id: null,
      supplierInfoId: form.value.id,
      name: null,
      score: 0
    }
  }
  gradeVisible.value = true
}

// 提交添加联系人
const submitContact = (formEl) => {
  formEl.validate(async (valid) => {
    if (!valid) return // 必填没有填就直接结束
    try {
      let res
      if (contactForm.value.id) { // 默认false 提交
        res = await supplierContactApi.edit(contactForm.value)
      } else {
        res = await supplierContactApi.create(contactForm.value)
      }
      if (res.data) {
        ElMessage.success('保存成功！')
        resetContactForm()
        getContactList()
      }
    } catch (e) {
      ElMessage.error(e.message)
    }
  })
}

// 打开事项
const openMatter = () => {
  detailData.value = {
    id: form.value.id
  }
  matterVisible.value = true
}

// 事项关闭回调
const closeCallback = () => {
  getMatterPage()
  matterVisible.value = false
}

//打开事项表格
const openMatterTable = (val,title) => {
  tableCode.value = val
  tableTitle.value = title
  matterTableVisible.value = true
}

onMounted(() => {
  window.onresize = () => {
    pageSize.value = document.body.clientWidth <= 1400 ? '1220px' : '85%'
  }
})


</script>

<style lang="scss" scoped>
.text-center {
  :deep(.el-input__inner) {
    text-align: center;
  }

  //:deep(.el-input) {
  //  text-align: center;
  //}
}

:deep input[disabled] {
  -webkit-text-fill-color: #383838 !important;
  -webkit-opacity: 1;
  opacity: 1;
  cursor: not-allowed;
}

.tabs-list {
  position: absolute;
  top: 90px;
  left: -50px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  overflow: auto;
  max-height: 100%;

  .close-btn {
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: var(--el-color-primary);
    padding: 10px 0;
    border-radius: 5px 0 0 5px;
  }
}

.active-detail-content {
  padding: 10px;
  background: var(--next-bg-main-color);
  min-height: 100%;

  .header-content {
    .active-title {
      text-align: center;
      font-size: 18px;
      color: var(--next-bg-menuBar-light-1);
    }

    .tips-cell {
      margin-right: 15px;
      font-size: 13px;
      display: flex;
      align-items: center;
      position: relative;
      padding-right: 15px;

      &::after {
        content: "";
        position: absolute;
        right: 0;
        top: 3px;
        bottom: 3px;
        border-right: 1px solid var(--next-bg-menuBarColor);
      }

      &:last-child {
        padding-right: 0;
        margin-right: 0;

        &::after {
          display: none;
        }
      }

      .tips {
        color: var(--el-color-info);
        margin-right: 5px;
      }

      .tips-data {
        color: var(--el-color-info);
        font-size: 13px;
      }
    }
  }

  .label-tips {
    font-size: 12px;
    color: var(--el-color-info);
    //width: 100px;
    //margin-right: 10px;
    display: block;
    text-align: center;
  }

  .label-tips-info {
    font-size: 12px;
    color: var(--el-color-info);
    width: 100px;
    margin-right: 10px;
    display: block;
    text-align: right;
  }

  .row-cell {
    margin-bottom: 18px;

    &:first-child {
      margin-top: 18px;
    }

    .label-data {
      font-size: 12px;
      color: var(--el-text-color-primary);
      margin-right: 5px;
    }
  }

  .action-card {
    margin-top: 10px;
    border-radius: 4px;
    border: 1px solid var(--el-border-color-extra-light);
    padding: 8px 10px;

    .title-item {
      display: flex;
      align-items: center;
      cursor: pointer;
      font-size: 12px;
      padding: 4px 6px;
      border-radius: 4px;
      border: 1px solid var(--el-color-primary-light-8);
      margin-left: 10px;

      span {
        line-height: 20px;
        display: inline-block;
        margin-left: 8px;
        color: var(--next-bg-menuBar-light-1);
      }

      .tips {
        font-weight: bold;
        color: var(--next-bg-menuBar-light-1);
        margin-left: 2px;
      }

      &:hover {
        background: var(--el-color-primary-light-8);

        .tips {
          color: var(--el-color-primary);
        }
      }
    }

    .action-cell {
      display: flex;
      align-items: center;

      .action-top {
        display: flex;
        align-items: center;
        margin-right: 20px;
        font-size: 14px;

        .action-tips {
          margin-left: 5px;
        }
      }

      .action-data {
        font-weight: bold;
      }
    }
  }

  .action-popper {
    background: transparent !important;
    position: relative;

    &:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--el-color-primary-light-9);
      opacity: .8;
      filter: grayscale(100%);
    }

    .el-popper__arrow::before {
      background: var(--el-color-primary-light-9) !important;
      opacity: .8;
      filter: grayscale(100%);
    }

    .sale-title {
      color: var(--el-text-color-primary);
    }
  }

  .card-item {
    :deep(.el-tag) {
      cursor: pointer;
    }

    .arrow {
      display: flex;
      align-items: center;
      height: 20px;
      transition: .2s;
      cursor: pointer;
      margin-top: 10px;
      color: var(--el-color-primary-light-6);
      font-size: 20px;

      &:hover {
        color: var(--el-color-primary);
      }
    }
  }

  .action-add-btn {
    margin: 0 1px;
    color: var(--el-color-primary);
    font-size: 30px;
    opacity: .5;
    position: absolute;
    top: 35%;
    left: 23.8%;
    width: 35px;

    &:hover {
      cursor: pointer;
      opacity: 1;
    }
  }

  .card-cell {
    .card-tips {
      margin-right: 5px;
    }

    .card-data {
      margin-top: 3px;
      cursor: pointer;

      &:hover {
        color: var(--el-color-primary);
      }
    }
  }

  .list-cell {
    display: flex;
    align-items: stretch;
    margin-top: 10px;

    .label-content {
      flex: 1;
      overflow: hidden;
      font-size: 13px;

      .label-data {
        font-size: 13px;
        line-height: 18px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        width: 190px;
        margin-top: 1px;
      }

      .label-all-data {
        overflow: unset;
        width: auto;
        text-overflow: unset;
        display: block;
      }
    }
  }

  .action-record-cell {
    padding: 18px 0;
    border-bottom: 1px dotted var(--el-border-color);

    &:last-child {
      border-bottom: none;
    }

    .label-time {
      margin-right: 10%;
      color: var(--el-color-info);
    }

    .label-data {
      flex: 1;
      overflow: hidden;
      margin-top: -2px;
    }
  }
}

.fixed-right {
  position: fixed;
  right: 20px;
  bottom: 10px;
  z-index: 999;

  .fixed-cell {
    background: var(--next-bg-topBar);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--el-color-primary);
    font-size: 20px;
    box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 0, rgba(0, 0, 0, 0.06) 0 1px 2px 0;
    margin-top: 10px;
  }

  .fixed-matter-cell {
    background: var(--next-bg-topBar);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--el-color-primary);
    font-size: 32px;
    box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 0, rgba(0, 0, 0, 0.06) 0 1px 2px 0;
    margin-top: 10px;
  }
}

.tips-cell-procure {
  flex: auto;

  .tips-item {
    display: flex;
    align-items: center;
    padding-left: 10px;
    justify-content: space-between;
  }

  .tips-item-border {
    display: flex;
    align-items: center;
    padding-left: 10px;
    justify-content: space-around !important;
  }

  .tips-name {
    margin-right: 10px;
    flex: 1;
    overflow: hidden;
    text-align: center;
    height: 50px;
    line-height: 50px;
  }

  .pie {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #D8D8D8;
    position: relative;
    font-size: 13px;
  }

  .circle {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 100;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 50%;
    line-height: 40px;
  }

  .left, .right {
    width: 25px;
    height: 50px;
    float: left;
    overflow: hidden;
  }

  .left {
    border-radius: 50px 0 0 50px;

  }

  .right {
    border-radius: 0 50px 50px 0;

  }

  .left-deg, .right-deg {
    width: 25px;
    height: 50px;
    background: #18A058;
  }

  .left-deg {
    transform-origin: right center;
    transform: rotate(-180deg);
  }

  .right-deg {
    transform-origin: left center;
    transform: rotate(-90deg);
  }
}

.panel-row {
  margin-top: 5px;

  :deep(.el-card) {
    margin: 5px 5px 0 0;
  }

  :deep(.el-rate__item) {
    display: grid;
    align-items: center;
  }
}
</style>
<style lang="scss">
.single-stage {
  text-align: center;
  height: 50%;
  font-size: 12px;
  cursor: pointer;
}

.procure-data {
  display: inline-block;
  width: 20%;
  margin-left: 15px;
}

.SupplierDetail {
  overflow: unset;
  position: fixed;
  background: var(--next-bg-main-color);
}

.tree-line-btn {
  margin-top: 14px;
  margin-left: 30px;
}

.activity {
  color: #18A058
}

.showFinger {
  &:hover {
    cursor: pointer;
    opacity: 1;
  }
}

.title-item {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid var(--el-color-primary-light-8);
  margin-left: 10px;

  span {
    line-height: 20px;
    display: inline-block;
    margin-left: 8px;
    color: var(--next-bg-menuBar-light-1);
  }

  .tips {
    font-weight: bold;
    color: var(--next-bg-menuBar-light-1);
    margin-left: 2px;
  }

  &:hover {
    background: var(--el-color-primary-light-8);

    .tips {
      color: var(--el-color-primary);
    }
  }
}

.action-cell {
  display: flex;
  align-items: center;
  margin-left: 100px;
  cursor: pointer;

  .action-top {
    display: flex;
    align-items: center;
    margin-right: 20px;
    font-size: 14px;

    .action-tips {
      margin-left: 5px;
    }
  }

  .action-data {
    font-weight: bold;
  }
}

.action-cell:hover {
  color: #18A058;
}

.shareTransfer{
  .el-transfer-panel{
    .el-input{
      height: 35px;
    }
  }
}


</style>
